<!DOCTYPE html>
<html>
<head>
  <title>用户报修工单系统</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
      color: #333;
    }
    h1 {
      background-color: #007bff;
      color: #fff;
      padding: 10px;
      text-align: center;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      background-color: #fff;
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    a {
      display: block;
      width: 150px;
      margin: 20px auto;
      padding: 10px;
      text-align: center;
      background-color: #007bff;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
    }
    a:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h1>用户报修工单系统</h1>
  <ul>
    <% repairs.forEach(repair => { %>
      <li>
        <strong><%= repair.title %></strong> - <%= repair.status %>
        <p><%= repair.description %></p>
        <div>
          <% repair.images.forEach(image => { %>
            <img src="uploads/<%= image %>" width="160" height="90" alt="图片">
          <% }) %>
        </div>
      </li>
      
    <% }) %>
  </ul>
  <a href="/repairs/new">创建新工单</a>
</body>
</html>
